<% attachable_subnets = dataset_authorize(@project
    .private_subnets_dataset
    .eager(:location)
    .where(location_id: @location.id),
  "PrivateSubnet:view")
  .exclude(id: @firewall.private_subnets_dataset.select(:id))
  .all

viewable_subnet_map = dataset_authorize(@firewall.private_subnets_dataset, "PrivateSubnet:view")
  .select_hash(:id, Sequel.as(true, :v))

firewall_path = path(@firewall)
edit_perm = has_permission?("Firewall:edit", @firewall) %>

<div class="p-6 grid gap-6">
  <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
    <div class="min-w-0 flex-1">
      <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
        Firewall Rules
      </h3>
    </div>
  </div>
  <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <table class="min-w-full divide-y divide-gray-300">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">CIDR</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Port range</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Description</th>
          <% if edit_perm %>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
          <% end %>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        <% @firewall.firewall_rules.sort_by { [it.cidr.version, it.cidr.to_s] }.each do |fwr| %>
          <tr>
            <% if edit_perm %>
              <% form = "form-fw-edit-rule-#{fwr.ubid}" %>
              <% handle_params_and_errors = @fwr_id == fwr.id %>
              <% ubid = fwr.ubid %>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                <%== part(
                  "components/form/text",
                  name: "cidr",
                  id: "cidr-#{ubid}",
                  value: fwr.cidr.to_s,
                  handle_params_and_errors:,
                  attributes: {
                    placeholder: "0.0.0.0/0",
                    required: true,
                    form:
                  }
                ) %>
              </td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                <%== part(
                  "components/form/text",
                  name: "port_range",
                  id: "port_range-#{ubid}",
                  value: fwr.display_port_range,
                  handle_params_and_errors:,
                  attributes: {
                    placeholder: "0..65536",
                    form:
                  }
                ) %>
              </td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                <%== part(
                  "components/form/text",
                  name: "description",
                  id: "description-#{ubid}",
                  value: fwr.description,
                  handle_params_and_errors:,
                  attributes: {
                    form:
                  }
                ) %>
              </td>
            <% else %>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= fwr.cidr %></td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= fwr.display_port_range %></td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= fwr.description %></td>
            <% end %>
            <% if edit_perm %>
              <td
                id="fwr-delete-<%= ubid %>"
                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
              >
                <% form(action: "#{firewall_path}/firewall-rule/#{ubid}/patch", method: :post, id: form, class: " inline-flex items-center justify-center") do %>
                  <%== part("components/form/submit_button", icon: "hero-pencil", attributes: {id: "submit-#{ubid}"}) %>
                <% end %>
                <%== part("components/delete_button", url: "#{firewall_path}/firewall-rule/#{ubid}", text: "") %>
              </td>
            <% end %>
          </tr>
        <% end %>
        <% if edit_perm %>
          <% handle_params_and_errors = @fwr_id == :create %>
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <%== part(
                "components/form/text",
                name: "cidr",
                handle_params_and_errors:,
                attributes: {
                  placeholder: "0.0.0.0/0",
                  form: "form-fw-create-rule-#{@firewall.ubid}"
                }
              ) %>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <%== part(
                "components/form/text",
                name: "port_range",
                handle_params_and_errors:,
                attributes: {
                  placeholder: "0..65536",
                  form: "form-fw-create-rule-#{@firewall.ubid}"
                }
              ) %>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <%== part(
                "components/form/text",
                handle_params_and_errors:,
                name: "description",
                attributes: {
                  form: "form-fw-create-rule-#{@firewall.ubid}"
                }
              ) %>
            </td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <% form(action: "#{firewall_path}/firewall-rule", method: :post, id: "form-fw-create-rule-#{@firewall.ubid}") do %>
                <%== part("components/form/submit_button", text: "Create") %>
              <% end %>
            </td>
          </tr>
          <tr class="!border-t-white">
            <td colspan="4" class="p-6 pt-0">
              <%== part(
                "components/form/select",
                name: "fw_rule_private_subnet_id",
                placeholder: "or select private subnet instead of using CIDR",
                options: @project
                  .private_subnets_dataset
                  .where(location_id: @firewall.location_id)
                  .order(:name)
                  .select_map([:id, :name])
                  .each { it[0] = UBID.from_uuidish(it[0]).to_s },
                attributes: {
                  form: "form-fw-create-rule-#{@firewall.ubid}"
                }
              ) %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
  <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
    <div class="min-w-0 flex-1">
      <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
        Attached Private Subnets
      </h3>
    </div>
  </div>
  <div id="fw-private-subnets" class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <table class="min-w-full divide-y divide-gray-300">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
          <% if edit_perm %>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
          <% end %>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        <% @firewall.private_subnets.each do |ps| %>
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <% if viewable_subnet_map[ps.id] %>
                <a href="<%= path(ps) %>" class="text-orange-600 hover:text-orange-700"><%= ps.name %></a>
              <% else %>
                <%= ps.name %>
              <% end %>
            </td>
            <% if edit_perm %>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                <% form(action: "#{firewall_path}/detach-subnet", method: :post) do %>
                  <input type="hidden" name="private_subnet_id" value="<%= ps.ubid %>">
                  <%== part("components/form/submit_button", text: "Detach") %>
                <% end %>
              </td>
            <% end %>
          </tr>
        <% end %>
        <% if edit_perm %>
          <tr>
            <td class="whitespace-nowrap py-4 pl-2 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <%== part(
                "components/form/select",
                name: "private_subnet_id",
                placeholder: "Select a subnet",
                options: attachable_subnets.map { [it.ubid, it.name] },
                attributes: {
                  required: true,
                  form: "form-fw-attach-#{@firewall.ubid}"
                }
              ) %>
            </td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <% form(action: "#{firewall_path}/attach-subnet", method: :post, id: "form-fw-attach-#{@firewall.ubid}") do %>
                <%== part("components/form/submit_button", text: "Attach") %>
              <% end %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
